<template>
  <!-- 我的入党信息页面 -->
  <div class="schedule">
      <h3 v-if="userinfomation.politics!='党员'">当前入党所处阶段：<span>{{userinfomation.politics}}</span></h3>
      <h3 v-else>恭喜您，已经是一位中国共产党员啦！</h3>
      <div class="historicalinfo">
          <!--  v-if="myflowPath.length==0" -->
          <div  v-if="myflowPath.length==0" class="hisNull">暂无历史申请数据</div>
          <el-timeline class="flow_path">
              <el-timeline-item  placement="top" v-for="(item,key) in myflowPath" :key="key" :timestamp="item.startTime">
                  <el-card>
                    <h4>提交了成为{{item.end}}申请</h4>
                    <p>提交时间：{{item.startTime}}</p>
                    <p>截止时间：{{item.endTime}}</p>
                </el-card>
              </el-timeline-item>
          </el-timeline>
      </div>
      <el-button v-show="dontplay" class="applyFor" @click="apply" type="primary">申请</el-button>
      <el-button type="primary" v-show="openpro" @click="openpros" class="applyFor">预备党员转正申请</el-button>
      <applyfordig @flowPath="flowPath" ref="applyAdd" v-if="showapplyfor"></applyfordig>
  </div>
</template>

<script>
import applyfordig from "./applyfor.vue"
export default {
    components:{
        applyfordig
    },
    data(){
        return{
            userinfomation:"",//我的详细信息
            showapplyfor:false,//是否显示弹框
            dontplay:false,//是否显示申请按钮
            openpro:false,//是否显示一键开启预备党员申请
            myflowPath:[],//入党申请流程信息
        }
    },
    mounted(){
        this.person()
        this.flowPath()
    },
    methods:{
     person(){//当前用户信息
       this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:"api/user/getCurrentUserInfo",
        url:"/user/getCurrentUserInfo",
        data:""
        }).then(res=>{
            // console.log(res)
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            this.userinfomation = res.data.data
            if(this.userinfomation.politics!=="党员"&&this.userinfomation.politics!=="预备党员"){
                // console.log("不显示申请按钮")
                this.dontplay = true//党员和预备党员不显示申请按钮
            }
            if(this.userinfomation.politics==="预备党员"){
                this.openpro = true//预备党员显示一键开启按钮
            }
            // console.log(this.userinfomation)
        })
     },
     flowPath(){//查询我的入党申请流程信息
        this.axios({
            headers:{'Authentication':localStorage.getItem('token')},
            method:"get",
            url:"/application/getPersonApplicationList",
        }).then(res=>{
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            // console.log(res)
            this.myflowPath = res.data.data.list
            // console.log(this.myflowPath)
            if(this.myflowPath.startTime!=null){
                this.myflowPath.stamp = this.myflowPath.startTime+"到"+this.myflowPath.endTime
            }
        })
     },
     apply(){//点击申请
        this.showapplyfor = true
        this.$nextTick(() => {
        this.$refs.applyAdd.init(this.userinfomation)
      })
     },
     openpros(){//点击开启预备党员申请按钮
        this.axios({
            headers:{'Authentication':localStorage.getItem('token')},
            method:"get",
            // url:"api/application/startReadyApplication",
            url:"/application/startReadyApplication",
        }).then(res=>{
            // console.log(res)
            if(res.data.code != 20001){
              return this.$message.error(res.data.msg)
            }
            this.axios({
                headers:{'Authentication':localStorage.getItem('token')},
                method:"get",
                url:"/application/regularApplication",
            }).then(res=>{
                if(res.data.code != 20001){
                    return this.$message.error(res.data.msg)
                }
                this.$message({
                    message: '提交申请成功，等待管理员审核！',
                    type: 'success'
                });
            })
        })
        
     }
    }
}
</script>

<style lang="scss">
.schedule{
    .historicalinfo{
        // width: 300px;
        height: 500px;
        // overflow: hidden;
        background: #fff;
        // padding: 2vh 0;
        .flow_path{
            padding: 2vh 0;
            // margin-right: 2vw;
            height: 500px;
        // border: 1px solid #000;
            overflow: auto;
        }
        .hisNull{
            // border: 1px solid #000;
            height: 500px;
            overflow: hidden;
            text-align: center;
            line-height:500px;
            color: rgb(168, 168, 168);
            font-weight: 700;
            font-size: 2em;
        }
    }
    .applyFor{
        margin-top: 2vh;
    }
}
</style>